import React, { useState } from 'react'
import './MyFirstComponent.css'

function MyFirstComponent() {
  const [message, setMessage] = useState('这是我的第一个组件！')
  const [count, setCount] = useState(0)

  const handleClick = () => {
    setCount(count + 1)
    setMessage(`点击了 ${count + 1} 次！`)
  }

  return (
    <div className="my-first-component">
      <h2>我的第一个 React 组件</h2>
      <div className="component-content">
        <p className="message">{message}</p>
        <button 
          className="click-button"
          onClick={handleClick}
        >
          点击我 ({count})
        </button>
        <div className="info">
          <p>这是一个功能完整的组件，包含：</p>
          <ul>
            <li>状态管理 (useState)</li>
            <li>事件处理</li>
            <li>动态内容更新</li>
            <li>CSS 样式</li>
          </ul>
        </div>
      </div>
    </div>
  )
}

export default MyFirstComponent 